<template>
  <el-dialog
      v-model="isShowDialog"
      title="新建文件夹"
      width="400"
  >
    <div class="content-wrap">
      <el-form :model="ruleForm" :rules="rules"
               ref="ruleFormRef" size="default" label-width="100px">
        <el-row :gutter="35">
          <el-col :span="24" class="mb20">
            <el-form-item label="父级文件夹" prop="parentName">
              <el-input v-model="ruleForm.parentName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="mb20">
            <el-form-item label="文件夹名称" prop="name">
              <el-input v-model="ruleForm.name"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="onCancel" size="default">取 消</el-button>
            <el-button type="primary" @click="onSubmit" size="default"
                       :loading="loading">提交</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {reactive, toRefs, defineComponent, ref, nextTick, unref} from 'vue';
import {ElMessage} from "element-plus";
import {addDirectory} from "/@/api/attachment";

export default defineComponent({
  name: 'attachmentDirectoryEdit',

  setup(props, {emit}) {
    const ruleFormRef = ref<HTMLElement | null>(null);
    const state = reactive({
      loading: false,
      isShowDialog: false,
      ruleForm: {
        id: undefined,
        pid: 0,
        parentName: '根目录',
        tag: '',
        name: ''
      },
      groups: [],
      rules: {
        name: [
          {required: true, message: "文件夹名称不能为空", trigger: "blur"},
        ]
      }
    });
    const openDialog = (_row: any) => {
      initForm();
      nextTick(() => {
        state.ruleForm.tag = _row.tag || '';
        if( _row.directoryId > 0) {
          state.ruleForm.pid = _row.directoryId;
          state.ruleForm.parentName = _row.directoryName;
        }
      })
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 新增
    const onSubmit = () => {
      const formWrap = unref(ruleFormRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          state.loading = true;
          addDirectory(state.ruleForm).then(() => {
            ElMessage.success('新建文件夹成功');
            closeDialog(); // 关闭弹窗
            emit('callback')
          }).finally(() => {
            state.loading = false;
          })
        }
      })
    };
    const initForm = () => {
      state.ruleForm = {
        id: undefined,
        pid: 0,
        parentName: '根目录',
        tag: '',
        name: ''
      }
    };
    return {
      ruleFormRef,
      openDialog,
      closeDialog,
      onCancel,
      onSubmit,
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss" scoped>

</style>
